import React, { Component } from 'react';
import { addComment, getGedanSong, deleteCollect, addCollect, getGedanxiangqing, pdCollect, getComment } from '../../utils/api';
import { bus } from '../../utils/eventBus';
import '../../style/all.css';
import './GedanDetail.css';

export default class GedanDetail extends Component {
	state = {
		// 歌单的歌曲数组
		songList: [],
		// 歌单的详细信息
		gedanDetail: {},
		activeTab: 1,
		// 是否已收藏
		isCollected: false,
		editor: null,
		// 评论数组
		commentList: []
	}
	componentDidMount () {
		window.scroll(0, 0);
		this.getSongs();
	}
	// 判断是否已收藏
	async pdCollects (gedanid) {
		let userid = Number(window.sessionStorage.getItem('userid'));
		let isFlag = await pdCollect(userid, 1, gedanid);
		if (isFlag.status !== 1) {
			this.setState({
				isCollected: true
			})
		}
	}
	// 获取歌单的歌曲和歌单的详细信息
	async getSongs () {
		let { search } = this.props.location;
		let gedanId = search.split('=')[1];
		let gedanDetail = await getGedanxiangqing(gedanId);
		const songs = await getGedanSong(gedanDetail.data[0].gedan_music_id);
		this.setState({
			songList: songs.data,
			gedanDetail: gedanDetail.data[0]
		}, function () {
			// 判断收藏
			this.pdCollects(this.state.gedanDetail.gedanid);
			// 获取评论
			this.getComments(this.state.gedanDetail.gedanid);
		})
	}
	// 发表评论
	async comment (gedanid) {
		let { editor } = this.state;
		if (editor.txt.text().trim().length === 0) {
			window.alert('评论不能为空！');
			return;
		}
		let userid = Number(window.sessionStorage.getItem('userid'));
		let addC = await addComment(userid, 1, gedanid, this.state.editor.txt.text(), new Date().toLocaleString());
		if (addC.status === 0) {
			editor.txt.clear();
			// 刷新评论
			this.getComments(gedanid);
		} else {
			window.alert(addC.message);
		}
	}
	// 获取评论
	async getComments (gedanid) {
		let commentList = await getComment(1, gedanid);
		if (commentList.status === 0) {
			this.setState({
				commentList: commentList.data
			})
		}
	}
	// 添加或删除收藏
	async addOrDeleteCollects (gedanid) {
		let userid = Number(window.sessionStorage.getItem('userid'));
		if (this.state.isCollected) {
			// 取消收藏
			let delC = await deleteCollect(userid, 1, gedanid);
			if (delC.status === 0) {
				window.alert(delC.message);
				this.setState({
					isCollected: false
				})
			} else {
				window.alert(delC.message);
			}
		} else {
			// 添加收藏
			let addC = await addCollect(userid, 1, gedanid);
			if (addC.status === 0) {
				this.setState({
					isCollected: true
				})
			} else {
				window.alert(addC.message);
			}
		}
	}
	render () {
		let { gedan_pic_url, gedan_title, gedan_introduction, user_nickname, gedantag_name, gedanid } = this.state.gedanDetail;
		let { songList, activeTab, isCollected, commentList } = this.state;
		return (
			<div className='gedandetail main'>
				<div className='back red' onClick={() => { this.props.history.goBack(); }}>&lt;返回</div>
				<div className='gedandetail_h'>
					<div className='gedanavator'>
						<img width='100%' height='100%' src={"http://localhost:3001/" + gedan_pic_url} alt="" />
					</div>
					<div className='gedanprop'>
						<div className='title'>{gedan_title}</div>
						<div className='user'>{user_nickname} <span>&nbsp;&nbsp;所创建的</span></div>
						<div className='gedantag'>标签： </div><span>{gedantag_name} </span>
						<div className='gedandesc'>{gedan_introduction}</div>
					</div>
					<div onClick={() => this.addOrDeleteCollects(gedanid)} className='addCollect mv_a'>{!isCollected ? "添加收藏" : "取消收藏"}</div>
				</div>
				<div className='gedandetail_c'>
					<span onClick={() => { this.setState({ activeTab: 1 }); }} className={activeTab === 1 ? 'tab ac' : 'tab red '}>歌曲</span>
					<span onClick={() => {
						this.setState({ activeTab: 0 }, function () {
							const E = window.wangEditor;
							const editor = new E(".fb");
							editor.config.height = 200;
							editor.config.menus = [];
							editor.create();
							this.setState({
								editor
							})
						});
					}} className={activeTab === 0 ? 'tab ac' : 'tab red'}>评论</span>
					{activeTab === 0 ? <div className='comment'>
						<div className='fb'></div>
						<div className='dianjifb' onClick={() => this.comment(gedanid)}>发表评论</div>
						<h2>评论列表({commentList.length})</h2>
						<ul>
							{commentList.map((item) => (
								<li key={item.commentid}>
									<div className='ava'>
										<img width="100%" height="100%" src={"http://localhost:3001/" + item.user_avator_url} alt="" />
									</div>
									<div className='comment_content'>
										<span>{item.user_nickname}</span>
										<p>
											{item.comment_content}
										</p>
										<span>{item.comment_create_time}</span>
									</div>
								</li>
							))}
						</ul>
					</div> : <div className='songs'>
						<h2>
							<span>id</span>
							<span>音乐标题</span>
							<span>歌手</span>
						</h2>
						<ul>
							{songList.map((item, index) => (
								<li key={item.musicid} onClick={() => { bus.emit('syplay', { id: item.musicid }) }}>
									<span>{index + 1}</span>
									<span>{item.music_name}</span>
									<span>{item.singer_name}</span>
								</li>
							))}
						</ul>
					</div>}
				</div>
			</div>
		)
	}
}
